<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>demo3</title>
				<script src="./lib/vue-2.4.0.js"></script>	
	</head>
	<body>
		<div id="app">
			<br />
			<br />
			<h1>{{msg}}</h1>
			<input type="button" value="开始" @click="go" />
			<input type="button" value="给我听" @click="stop" />
		</div>
		
		<script>
			// 在VM实例中 想要获取 data 上的数据 或者调用 methods 里面的方法 必须通过this.属性名 或者 this.方法名 来访问 这里的this 就表示 我们 new出来的 vm实例对象
			var vm = new Vue ({
				el: '#app',
				data: {
					msg: '猥琐发育, 别浪~~！',
					timeId: null
				},
				
				methods: {
					go() {
						if(this.timeId != null){
							alert('已经开启')
							return
						}
						
						
					this.timeId = setInterval ( () => {
							var start = this.msg.substring(0, 1)
							// 获取到 后面的所有字符
							var end = this.msg.substring(1)
							this.msg = end + start 
						},400)
					},
				stop() {
					clearInterval(this.timeId)
					this.timeId = null
				}
				}
			})
		</script>
		
	</body>
</html>
